<template>

  <div class="project-material">



    <div class="project-material-part">
      <div><span style="font-weight: bold;font-size: 16px;">在建项目10大物资采购单价对比</span></div>
      <div style="padding: 10px;width: 100%;">
        <Tabs type="card" style="width: 100%;">
          <TabPane label="航道疏浚">
            <div style="width: 100%; height: 350px;margin-left: 20px; margin-top: 2px" id="line"></div>
          </TabPane>
          <TabPane label="公路保养">项目二的内容</TabPane>
          <TabPane label="道路基建">项目三的内容</TabPane>
          <TabPane label="铁路维护">项目三的内容</TabPane>
          <TabPane label="舰船修造">项目三的内容</TabPane>
        </Tabs>
      </div>
    </div>

    <div class="project-material-part">
      <material-consumption-echart></material-consumption-echart>
    </div>

  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import MaterialConsumptionEchart from "@/view/component/engine/echart/MaterialConsumptionEchart";

  export default {
    name: "ProjectMaterialInfo",
    components: {MaterialConsumptionEchart},
    data() {
      return {
        activeName: 'first'
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        let chart = document.getElementById('line');
        let myChart = echarts.init(chart);
        let option = {
          backgroundColor: '#ffffff',
          title: {
            textStyle: {
              align: 'center',
              color: '#fff',
              fontSize: 20,
            },
            top: '5%',
            left: 'center',
          },
          legend: {
            type: 'plain',
            icon: 'rect',
            bottom: 0,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          grid: {
            top: '15%',
            left: '10%',
            right: '10%',
            bottom: '25%',
            // containLabel: true
          },
          xAxis: [{
            type: 'category',
            axisLine: {
              show: true
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            splitArea: {
              // show: true,
              color: '#f00',
              lineStyle: {
                color: '#f00'
              },
            },
            axisLabel: {
              show: true,
              rotate: -45,
              textStyle: {
                color: '#000', //X轴文字颜色
              },
            },
            splitLine: {
              show: false
            },
            data: ['2021-01-12', '2021-02-12', '2021-03-12', '2021-04-12', '2021-05-12', '2021-06-12'],

          }],

          yAxis: [{
            type: 'value',
            name: "单位(元)",
            min: 0,
            max: 2500,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: {
              show: true,
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: '#000000',
                fontSize: 14

              },
            },
            axisTick: {
              show: false,
            },
          }],
          series: [{
            name: '最高单价',
            type: 'line',
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#177DDC",

              },
            },
            label: {
              show: true,
              position: 'top',

              textStyle: {
                color: '#177DDC',
              }
            },
            itemStyle: {
              color: "#177DDC",
            },
            tooltip: {
              show: false
            },

            data: [1300, 800, 2400, 780, 1700, 1600]
          },
            {
              name: '平均单价',
              type: 'line',
              // smooth: true, //是否平滑
              showSymbol: false,
              // symbol: 'image://./static/images/guang-circle.png',


              lineStyle: {
                normal: {
                  color: "#2CB96D",


                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#2CB96D',
                }
              },

              itemStyle: {
                color: "#00ca95",
                borderColor: "#fff",


              },
              tooltip: {
                show: false
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,202,149,0.3)'
                  },
                    {
                      offset: 1,
                      color: 'rgba(0,202,149,0)'
                    }
                  ], false),

                  opacity: 0
                }
              },
              data: [1100, 780, 1650, 750, 1450, 1580],
            },
            {
              name: '最低单价',
              type: 'line',
              showSymbol: false,
              lineStyle: {
                normal: {
                  color: "#FB558A",

                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#FB558A',
                }
              },
              itemStyle: {
                color: "#FB558A",
              },
              tooltip: {
                show: false
              },

              data: [800, 750, 900, 650, 950, 1500]
            },
            {
              name: '物资平均单价',
              type: 'line',
              // smooth: true, //是否平滑
              showSymbol: false,
              // symbol: 'image://./static/images/guang-circle.png',


              lineStyle: {
                normal: {
                  color: "yellow",
                  width: 1,


                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: 'yellow',
                }
              },

              itemStyle: {
                color: "yellow",
                borderColor: "#fff",


              },
              tooltip: {
                show: false
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,202,149,0.3)'
                  },
                    {
                      offset: 1,
                      color: 'rgba(0,202,149,0)'
                    }
                  ], false),

                  opacity: 0
                }
              },
              data: [1000, 1000, 1000, 1000, 1000, 1000],
            },
          ]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .ivu-tabs-bar {
    border: none;
  }

  /deep/ .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
    border-bottom: 1px solid #dcdee2;
    border-radius: 0;
  }

  .project-material {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
    width: 100%;
    height: 450px;
    margin-top: 10px;

    //background: #ee9900;
    .project-material-part {
      width: 45%;
      height: 100%;
    }
  }
</style>
